<script lang="ts" setup>
import {onMounted, ref, type Ref} from "vue";
import SeparatePageLayout from "@/layouts/SeparatePageLayout.vue";
import {stripHTML} from "@/utils/tools";
import AnnouncementScroll from "@/components/pageElement/AnnouncementScroll.vue";
import {n2r} from "@/utils/routes";
import {useWebsiteInfoStore} from "@/stores/websiteInfoStore";
import ScrollDisplay from "@/components/pageElement/ScrollDisplay.vue";
import {
  fetchCarouselData,
  fetchDonationListData,
  fetchNewsData,
  fetchNewsWithImages,
  fetchScrollData
} from "@/utils/index/fetchData";

interface CarouselImage {
  imageUrl: string;
}

interface CarouselItem {
  createBy: string;
  updateBy: string;
  createTime: string;
  updateTime: string;
  id: number;
  name: string;
}

// 定义响应式数据来存储不同类型的数据列表
const carouselImages: Ref<CarouselImage[]> = ref([]);
const latestDonations: Ref<Article[]> = ref([]);
const signingUpdates: Ref<Article[]> = ref([]);
const newsUpdates: Ref<Article[]> = ref([]);
const planningSchemes: Ref<Article[]> = ref([]);
const donationList: Ref<Article[]> = ref([]);

// 最新捐赠，滚动展示数据
const scrollRenderData = ref('');

const websiteInfoStore = useWebsiteInfoStore()

onMounted(() => {
  fetchCarouselData(carouselImages);
  fetchScrollData(scrollRenderData);
  fetchNewsData("最新捐赠", latestDonations);
  fetchNewsWithImages("签约动态", signingUpdates, formatDate);
  fetchNewsWithImages("新闻动态", newsUpdates, formatDate);
  fetchNewsData("策划方案", planningSchemes);
  fetchDonationListData(donationList); // 分区获取捐赠名单
});
</script>

<template>
  <separate-page-layout>
    <!-- 轮播图 -->
    <el-carousel class="w-web mx-auto" height="500px" trigger="click">
      <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
        <img :alt="String(index)" :src="image.imageUrl" class="size-full object-cover"/>
      </el-carousel-item>
    </el-carousel>

    <!-- 最新捐赠 -->
    <div class="mid1 w-web mx-auto mb-8">
      <div class="w-full">
        <div class="title">
          <h1>
            最新捐赠
          </h1>
        </div>
        <div class="text-base whitespace-nowrap grid auto-rows-min gap-2.5">
          <div class="w-web flex items-center justify-items-center">
            <span>公告：</span>
            <announcement-scroll :text="websiteInfoStore.bulletin"
                                 class="flex-1"/>
          </div>
          <div class="w-web flex items-start justify-items-center">
            <span>累计捐赠：</span> <!--月计-->
            <div class="whitespace-pre-line">{{ websiteInfoStore.monthly }}</div>
          </div>
          <div class="w-web">
            <!-- 实时滚动 -->
            <scroll-display
                :renderCount="5"
                :renderData="scrollRenderData"
                :scrollSpeed="20"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="w-web mx-auto mb-8 flex justify-between">
      <!-- 签约动态 -->
      <div class="mid3z">
        <div class="title">
          <h1>
            <NuxtLink :to="{name:n2r('签约动态')}" @click="setLocationByName('签约动态')">+MORE</NuxtLink>
            签约动态
          </h1>
        </div>
        <div class="mid1rx">
          <ul>
            <li
                v-for="(news, index) in signingUpdates"
                :key="index"
                :class="{ first: index === 0 }"
            >
              <img v-if="index === 0" :src="news.imageUrl" height="107" width="145"/>
              <div v-if="index === 0">
                <h2>
                  <NuxtLink
                      :to="{ name:n2r('常规文章') , query: { articleId: news.id, from: 'direct' } }"
                      class="line-clamp-1 w-9/12"
                      @click="setLocationByName('签约动态')">
                    {{ news.title }}
                  </NuxtLink>
                </h2>
                <span>{{ news.updateTime }}</span>
                <p class="line-clamp-2 leading-normal">{{ stripHTML(news.details) }}</p>
              </div>
              <span v-else class="sj">{{ news.updateTime }}</span>
              <span v-else class="point">•</span>
              <NuxtLink v-else
                        :to="{ name:n2r('常规文章'), query: { articleId: news.id, from: 'direct' } }"
                        class="line-clamp-1 w-9/12"
                        @click="setLocationByName('签约动态')"
              >
                {{ news.title }}
              </NuxtLink>
            </li>
          </ul>
        </div>
      </div>

      <!-- 新闻动态 -->
      <div class="mid3z">
        <div class="title">
          <h1>
            <NuxtLink :to="{name:n2r('新闻动态')}" @click="setLocationByName('新闻动态')">+MORE</NuxtLink>
            新闻动态
          </h1>
        </div>
        <div class="mid1rx">
          <ul>
            <li
                v-for="(news, index) in newsUpdates"
                :key="index"
                :class="{ first: index === 0 }"
            >
              <img v-if="index === 0" :src="news.imageUrl" height="107" width="145"/>
              <div v-if="index === 0">
                <h2>
                  <NuxtLink
                      :to="{ name:n2r('常规文章') , query: { articleId: news.id, from: 'direct' } }"
                      class="line-clamp-1 w-9/12"
                      @click="setLocationByName('新闻动态')">
                    {{ news.title }}
                  </NuxtLink>
                </h2>
                <span>{{ news.updateTime }}</span>
                <p class="line-clamp-2 leading-normal">{{ stripHTML(news.details) }}</p>
              </div>
              <span v-else class="sj">{{ news.updateTime }}</span>
              <span v-else class="point">•</span>
              <NuxtLink v-else
                        :to="{ name:n2r('常规文章'), query: { articleId: news.id, from: 'direct' } }"
                        class="line-clamp-1 w-9/12"
                        @click="setLocationByName('新闻动态')"
              >
                {{ news.title }}
              </NuxtLink>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="w-web mx-auto mb-8 flex justify-between">
      <!-- 策划方案 -->
      <div class="mid3z">
        <div class="title">
          <h1>
            <NuxtLink :to="{name:n2r('策划方案')}" @click="setLocationByName('策划方案')">+MORE</NuxtLink>
            策划方案
          </h1>
        </div>
        <ul>
          <li
              v-for="(disclosure, index) in planningSchemes"
              :key="index"
              :class="{ mt: index === 0 }"
          >
            <span class="sj">{{ formatDate(disclosure.updateTime) }}</span>
            <span class="point">•</span>
            <NuxtLink
                :to="{ name:n2r('常规文章'), query: { articleId: disclosure.id, from: 'direct' } }"
                class="line-clamp-1 w-9/12"
                @click="setLocationByName('策划方案')">
              {{ disclosure.title }}
            </NuxtLink>
          </li>
        </ul>
      </div>
      <!-- 捐赠名单 -->
      <div class="mid3z">
        <div class="title">
          <h1>
            <NuxtLink :to="{ name:n2r('捐赠名单')}" @click="setLocationByName('捐赠名单')">+MORE</NuxtLink>
            捐赠名单
          </h1>
        </div>
        <ul>
          <li v-for="(report, index) in donationList" :key="index" :class="{ mt: index === 0 }">
            <span class="sj">{{ formatDate(report.updateTime) }}</span>
            <span class="point">•</span>
            <NuxtLink
                :to="{ name:n2r('常规文章'), query: { articleId: report.id, from: 'direct' } }"
                class="line-clamp-1 w-9/12" @click="setLocationByName('捐赠名单')">
              {{ report.title }}
            </NuxtLink>
          </li>
        </ul>
      </div>
    </div>
  </separate-page-layout>
</template>

<style scoped>
ul:not(.num) li {
  a {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}

.mt {
  margin-top: 20px;
}
</style>